<template>
  <view class="aftersales">
    <card-com :show-gap="false">
      <view class="product">
        <image class="cover" :src="product.cover_url" ></image>
        <view class="desc">
          <view class="title">{{ product.title }}</view>
          <view class="sku">{{ sku.name }}</view>
        </view>
      </view>
    </card-com>

    <view @click="openTypesPopup">
      <card-com title="申请类型" :head="types[typeIndex].text" :show-arrow="true" :show-gap="false" ></card-com>
      <uni-popup ref="typepopup" type="bottom">
        <view class="types">
          <view class="type" v-for="(type, index) in types" :key="index" @click="setAftersaleType(index)">{{ type.text }}</view>
          <view class="type cancel" @click="closeTypesPopup">取消</view>
        </view>
      </uni-popup>
    </view>

    <view @click="openReasonsPopup" v-if="reasons.length>0">
      <card-com title="申请原因" :head="reasons[reasonIndex].text" :show-arrow="true" :show-gap="false" ></card-com>
      <uni-popup ref="reasonpopup" type="bottom">
        <view class="reasons">
          <view class="reason" v-for="(reason, index) in reasons" :key="index" @click="setAftersaleReason(index)">
            {{ reason.text }}
          </view>
          <view class="reason cancel" @click="closeReasonsPopup">取消</view>
        </view>
      </uni-popup>
    </view>

    <card-com :show-gap="false">
      <view class="refund-money">
        <view class="title">
          <view class="text">退款金额</view>
          <uni-easyinput type="digit" :inputBorder="false" :clearable="false" v-model="form.refund_money"></uni-easyinput>
        </view>
        <view class="edit">修改</view>
      </view>
    </card-com>
    <card-com :show-gap="false">
      <view class="content">
        <uni-easyinput type="textarea" autoHeight placeholder="请您详细填写申请说明" :inputBorder="false" v-model="form.nego_content"></uni-easyinput>
      </view>
      <image-upload-com></image-upload-com>
    </card-com>
    <card-com title="联系电话" v-if="order.address" :head="order.address.contact_phone" :show-gap="false"></card-com>
    <card-com title="售后协商过程">
      <view class="negos">
        <view class="nego" v-for="nego in negos" :key="nego.id">
          <view class="content">
            <view class="id">ID: {{ nego.id }}</view>
            <view class="string">{{ nego.content }}</view>
          </view>
          <view class="time">{{ nego.created_at }}</view>
        </view>
      </view>
    </card-com>
    <view class="submit">
      <button v-if="orderRefund && orderRefund.is_checked" class="button" :plain="true" >售后已结束</button>
      <button v-else class="button" :plain="true" @click="submit" >提交申请</button>
    </view>
  </view>
</template>

<script>
import _ from 'lodash'
import store from 'store'
import { mapGetters } from 'vuex'
import CleanFileStore from "mixins/CleanFileStore"
import LoadOrder from "mixins/LoadOrder"
import ImageUploadCom from "components/common/ImageUploadCom"
import { getAftersaleReasons, createOrderRefund, getOrderRefund, getOrderRefundNegos } from "api/orderApi";

export default {
  name: "aftersales",
  store,
  mixins: [CleanFileStore, LoadOrder],
  components: {ImageUploadCom},
  data: () => ({
    stateIndex: 0,
    typeIndex: 0,
    reasonIndex: 0,
    parcelStatus: [
      {type: 'received', text: '已收货'},
      {type: 'unreceived', text: '未收货'}
    ],
    types: [
      {type: 'return_money_only', text: '仅退款'},
      {type: 'return_parcel_money', text: '退货退款'}
    ],
    reasons: [],
    orderRefund: null, // already applied order refund.
    negos: [],
    form: {
      item_id: null,
      type: 'return_money_only',
      reason: 'other_problem',
      parcel_status: 'received',
      refund_money: 0,
      nego_content: '',
      proof_images: []
    }
  }),
  computed: {
    ...mapGetters(['uploadImages'])
  },
  watch: {
    items: {
      async handler(val) {
        if (val && val.length > 0) {
          this.form.item_id = val[0].id
          this.form.refund_money = val[0].price
          await this.loadOrderRefund()
          if (this.orderRefund) {
            await this.loadOrderRefundNegos()
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    async loadAftersaleReasons() {
      const response = await getAftersaleReasons()
      this.reasons = response.data
    },
    async loadOrderRefund() {
      this.orderRefund = await getOrderRefund(this.form.item_id)
    },
    async loadOrderRefundNegos() {
      const response = await getOrderRefundNegos(this.orderRefund.id)
      this.negos = response.data
    },
    openTypesPopup() {
      this.$refs.typepopup.open('bottom')
    },
    closeTypesPopup() {
      this.$refs.typepopup.close()
    },
    openReasonsPopup() {
      this.$refs.reasonpopup.open('bottom')
    },
    closeReasonsPopup() {
      this.$refs.reasonpopup.close()
    },
    setAftersaleType(index) {
      this.typeIndex = index
      this.form.type = this.types[index].type
      this.$refs.typepopup.close()
    },
    setAftersaleReason(index) {
      this.reasonIndex = index
      this.form.reason = this.reasons[index].reason
      this.$refs.reasonpopup.close()
    },
    async createNewOrderRefund() {
      let negoContent = this.form.nego_content
      this.form.nego_content = _.escape(negoContent)
      this.form.proof_images = this.uploadImages
      await createOrderRefund(this.form)
      uni.showModal({
        title: '提示',
        content: '售后申请已提交，请等候处理...',
        showCancel: false,
        success: async (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },
    submit() {
      this.createNewOrderRefund()
    }
  },
  onLoad() {
    this.loadAftersaleReasons()
  }
}
</script>

<style lang="scss" scoped>
.aftersales {
  padding: 20rpx;
  .product {
    display: flex;
    align-items: center;
    .cover {
      display: block;
      width: 120rpx;
      height: 120rpx;
      border: 1px #EEEEEE solid;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }
    .desc {

    }
  }
  .types {
    background: white;
    text-align: center;
    .type {
      padding: 20rpx;
      border-bottom: 1px #EEEEEE solid;
    }
  }
  .reasons {
    background: white;
    text-align: center;
    .reason {
      padding: 20rpx;
      border-bottom: 1px #EEEEEE solid;
    }
  }
  .cancel {
    border-top: 5px #EEEEEE solid;
  }
  .refund-money {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
    }
    .edit {
      font-size: 30rpx;
      color: #999999;
    }
  }
  .negos {
    .nego {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      border-top: 1px #EEEEEE solid;
      padding: 15rpx;
      .content {
        display: flex;
        .id {
          color: #999999;
          margin-right: 20rpx;
        }
        .string {
          color: #333333;
        }
      }
      .time {
        color: #999999;
      }
    }
  }
  .submit {
    .button {
      width: 560rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
      border: none;
      border-radius: 52rpx;
      font-size: 30rpx;
      color: #333333;
    }
  }
}
</style>
